<template>
<view>
<!--return_goods_info.wxml-->
<view class="order-mes">
    <view class="order-name">
        <view>订单编号：{{return_goods.order_sn}}</view>
        <view>申请时间：{{return_goods.addTimeFormat}}</view>
    </view>
    <!-- <button class="apply-btn" hidden="{{!(return_goods.status==2&&return_goods.type==1)}}" bindtap="receiveOrder">确定收货</button> -->
    <button class="apply-btn" :hidden="!(return_goods.status!=-2&&return_goods.status<1)" @tap="cancelReturn">取消服务</button>
</view>
<view class="goods-mes">
    <view class="goods-pic">
        <image class="wh100" :src="url + '/api/goods/goodsThumImages?goods_id=' + return_goods.goods_id + '&width=100&height=100'"></image>
    </view>
    <view class="goods-des">
        <view class="goods-name ellipsis-1">{{goods.goods_name}}</view>
        <view class="now-price co-red">最新价格 : ￥{{goods.shop_price}}</view>
    </view>
</view>
<view class="apply-mes pd-bg-fff">

    <view class="apply-item">
        <view class="apply-til">审核进度</view>   
         <view class="inputs" @tap.stop="back" v-if="return_goods.status == 1 && return_goods.type > 0 &&  return_goods.is_receive == 1">填写物流信息</view>             
    </view>
    <view class="apply-text" v-if="return_goods.status == 0">亲爱的客户，您的服务单已经提交成功，请您耐心等待客服审核</view>
    <view class="apply-text" v-if="return_goods.status == 1 || return_goods.status > 1">亲爱的客户，您的服务单客服已审核</view>
    <view class="apply-text" v-if="return_goods.status == 1 && return_goods.type > 0">尊敬的客户，很抱歉出现这样的情况，如情况属实且非人为因素造成损坏，我们可以为您办理。请将商品全套及发票原件自行返回，
                        如属商品质量问题，运费会以余额方式返还到您的商城账户；如非质量问题（误购），运费将由您承担(拒收到付），
                        寄回商品时请附上您的订单号及收货人姓名电话、发货单详情（运单号、快递公司、快递费用），以便我们在收到返回商品时及时为您处理，感谢您的支持，谢谢！</view>

    <!-- <view class="apply-text" wx:if="{{return_goods.status > 1}}">亲爱的客户，您的服务单客服已审核</view> -->
    <view class="apply-text" v-if="return_goods.status == -1">亲爱的客户，您的服务单客服未通过审核</view>
    <view class="apply-text" v-if="return_goods.status == 2">尊敬的客户，您的快递已寄出，等待卖家收货</view>
    <view class="apply-text" v-if="return_goods.status == 3 && return_goods.type > 0">尊敬的客户，已收到您的快递，正在处理您的服务单</view>
     <view class="apply-text" v-if="return_goods.status == 3 && return_goods.type == 0"> 尊敬的客户，您的服务单已审核</view>
 <view class="apply-text" v-if="return_goods.status == 4 || return_goods.status == 5"> 尊敬的客户，您的服务单已完成，感谢您对{{shop_name}}的大力支持</view>

  <view class="apply-text" v-if="return_goods.status == -2"> 尊敬的客户，您的服务单已取消，感谢您对{{shop_name}}的大力支持</view>
    <view class="apply-item">
        <view class="apply-til">售后信息</view>
        <view>{{return_goods.status_name}}</view>
    </view>
    <view class="apply-item">
        <view class="apply-til">处理方式</view>
        <view>期望处理方式“{{return_goods.type==0?'退款':(return_goods.type==1?"退货退款":"换货")}}”</view>
    </view>
    <view class="apply-item">
        <view class="apply-til">问题描述</view>
        <view>{{return_goods.reason}}</view>
    </view>
    <view class="apply-item">
        <view class="apply-til">售后备注</view>
        <view class="apply-remark">{{return_goods.remark}}</view>
    </view>
    <view class="img-title" v-if="return_goods.imgs.length>0"><view>问题图片</view></view>
    <view class="img-box">
        <image v-for="(item, index) in return_goods.imgs" :key="index" :src="url + item" @tap="previewImgs" :data-idx="index"></image>
    </view>
</view>
<view class="apply-state">
    <view class="state-item">
        <view class="item-wrap">
            <view class="state-title">您的服务单已申请成功，等待售后审核中</view>
            <view class="state-time">{{return_goods.addTimeFormat}}</view>
            <view class="state-user">操作人：系统</view>
        </view>
        <view class="item-wrap" v-if="return_goods.status>0">
            <view class="state-title">亲爱的客户，您的服务单已通过审核</view>
            <view class="state-user">操作人：卖家</view>
        </view>
        <view class="item-wrap" v-if="return_goods.status==-1">
            <view class="state-title">亲爱的客户，很抱歉！您的服务单未通过审核</view>
            <view class="state-user">操作人：卖家</view>
        </view>

         <block v-if="return_goods.status==2">      
            <view class="item-wrap">
                <view class="state-title">买家已发货                 
                </view>
                <view>{{return_goods.seller_delivery.expressTimeFormat}}</view>
                <view class="state-user">操作人：买家</view>
            </view>
            
        </block>

        <block v-if="return_goods.status==3&&return_goods.type>0">
            <view class="item-wrap">
                <view class="state-title">亲爱的客户，卖家已收到您寄回的物品</view>                  
                <view class="state-user">操作人：卖家</view>
            </view>           
        </block>
        <block v-if="return_goods.type == 2">
         <view class="item-wrap user-send" v-if="return_goods.status >= 2">
                <view class="state-title">用户已发货</view>                   
                <view class="state-user">操作人：买家</view>
                    <view>快递公司：{{return_goods.delivery.express_name}}</view>
                    <view>快递单号：{{return_goods.delivery.express_sn}}</view> 
            </view>   
            <view class="item-wrap user-send" v-if="return_goods.status >= 3">
                <view class="state-title">亲爱的客户，卖家已发货</view>                   
                <view class="state-user">操作人：卖家</view>
                    <view>快递公司：{{return_goods.seller_delivery.express_name}}</view>
                    <view>快递单号：{{return_goods.seller_delivery.express_sn}}</view>
            </view>    

              <view class="item-wrap" v-if="return_goods.status == 4">
                <view class="state-title">换货完成</view>                   
                <view class="state-user">操作人：卖家</view>
              </view>   
        </block>

         <block v-else>
             <block v-if="return_goods.status==4 || return_goods.status == 5">   

           <view class="item-wrap" v-if="return_goods.type == 1">
                <view class="state-title">亲爱的客户，卖家已收到寄回的物品</view>                   
                <view class="state-user">操作人：卖家</view>
            </view>    

            <view class="item-wrap">
                <view class="state-title">亲爱的客户，卖家已退还货款                   
                </view>
                <view>{{return_goods.seller_delivery.expressTimeFormat}}</view>
                <view class="state-user">操作人：卖家</view>
            </view>
             <view class="item-wrap">
            <view class="state-title">亲爱的客户，您的服务单完成</view>
            <view class="state-user">操作人：卖家</view>
        </view>
        </block>  
         </block>
        <view class="item-wrap" v-if="return_goods.status==-2">
            <view class="state-title">亲爱的客户，您的服务单已经取消</view>
            <view class="state-user">操作人：{{userInfo.nickname}}</view>
        </view>
    </view>
</view>
</view>
</template>

<script>
var app = getApp();
var setting = app.globalData.setting;
var request = app.globalData.request;
var util = require("../../../utils/util.js");

export default {
  data() {
    return {
      url: setting.url,
      resourceUrl: setting.resourceUrl,
      shop_name: setting.appName,
      return_goods: null,
      //请求的数据
      goods: null,
      //请求的数据
      userInfo: null,
      back_logistics: false,
      id: ''
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    this.setData({
      userInfo: app.globalData.userInfo,
      id: options.id
    });
    this.requestReturnGoods(options.id);
  },
  onShow: function () {
    if (this.back_logistics) {
      this.back_logistics = false;
      this.onLoad({
        id: this.id
      });
    }
  },
  methods: {
    requestReturnGoods: function (id) {
      var that = this;
      request.get('/api/order/return_goods_info', {
        failRollback: true,
        data: {
          id: id
        },
        success: function (res) {
          var return_goods = res.data.result.return_goods;
          return_goods.addTimeFormat = util.format(return_goods.addtime);

          if (typeof return_goods.seller_delivery == 'object' && typeof return_goods.seller_delivery.express_time == 'number') {
            return_goods.seller_delivery.expressTimeFormat = util.format(return_goods.seller_delivery.express_time);
          }

          that.setData({
            return_goods: return_goods,
            goods: res.data.result.goods
          });
        }
      });
    },

    /** 确认收货 */
    receiveOrder: function () {
      var that = this;
      var return_id = this.return_goods.id;
      uni.showModal({
        title: '确定已收货？',
        success: function (res) {
          if (res.confirm) {
            request.post('/api/order/receiveConfirm', {
              data: {
                return_id: return_id
              },
              success: function (res) {
                uni.setStorageSync('user:return_goods_list:update', true);
                that.requestReturnGoods(return_id);
              }
            });
          }
        }
      });
    },
    back: function () {
      uni.navigateTo({
        url: '../../user/return_goods_logistics/return_goods_logistics?id=' + this.return_goods.id
      });
    },

    /** 取消退换货 */
    cancelReturn: function () {
      var that = this;
      var return_id = this.return_goods.id;
      uni.showModal({
        title: '确定取消售后服务？',
        success: function (res) {
          if (res.confirm) {
            request.post('/api/order/return_goods_cancel', {
              data: {
                id: return_id
              },
              success: function (res) {
                uni.setStorageSync('user:return_goods_list:update', true);
                that.requestReturnGoods(return_id);
              }
            });
          }
        }
      });
    },

    /** 预览图片 */
    previewImgs: function (e) {
      var that = this;
      var imgs = this.return_goods.imgs;
      imgs = imgs.map(function (val) {
        return that.url + val;
      });
      uni.previewImage({
        current: imgs[e.currentTarget.dataset.idx],
        urls: imgs
      });
    }
  }
};
</script>
<style>
/* return_goods_info.wxss */
.order-mes{
    padding:10rpx 30rpx;
    background-color: #fff;
}
.order-mes .order-name{
    height: 54rpx;
    line-height: 54rpx;
    font-size: 30rpx;
    color: #777;
    width: 500rpx;
    display: inline-block;
}
.order-name view{
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
}
.apply-btn{
    width: 150rpx;
    float: right;
    margin-top: 20rpx;
} 
.goods-mes{
    padding:10rpx 30rpx;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
}
.goods-pic{
    width: 180rpx;
    height: 180rpx;
}
.goods-des{
    width: 490rpx;
    font-size: 30rpx;
}
.goods-name{
    width: 100%;
    height: 30rpx;
    color: #444;
    line-height: 1;
    margin-bottom: 20rpx;
}
.apply-mes{
    padding:30rpx;
}
.apply-item{
    display: flex;
    height: auto;
    min-height: 60rpx;
    line-height: 60rpx;
    font-size: 28rpx;
    overflow: auto;
    color: #777;
}
.apply-til{
    color: #444;
    margin-right: 40rpx;
    display: block;
}
.apply-remark{
  width: 500rpx;
}
.apply-state{
    margin-top: 20rpx;
    background-color: #fff;
    padding-left: 50rpx;
    padding-top: 80rpx;
}
.img-title{
    position: relative;
    border-top: 1rpx solid #f3f3f3;
    margin-top: 40rpx;
    text-align: center;
}
.img-title view{
    position: relative;
    top: -28rpx;
    font-size: 28rpx;
    color: #666666;
    display: inline;
    background: white;
    padding: 0 5rpx;
}
.img-box{
    display: inline-block;
}
.img-box image{
    height: 120rpx;
    width: 120rpx;
    padding: 8rpx;
}
.state-item{
    border-left: 1px solid #f3f3f3;
    padding-left: 40rpx;
}
.item-wrap{
    position: relative;
    margin-bottom:80rpx;
    padding-bottom:50rpx;
    border-bottom: 1px solid #f3f3f3;
    font-size: 24rpx;
    color: #aaa;
    line-height: 1;
}
.item-wrap::before{
    content: '';
    position: absolute;
    left:-61rpx;
    top: 0;
    width: 26rpx;
    height: 26rpx;
    border-radius: 50%;
    background-color: #e23435;
    border:4px solid #ed8182;
}
.state-title{
    font-size: 28rpx;
    font-weight: bold;
    color: #666;
    padding-bottom:20rpx; 
}
.state-title view{
    font-weight: normal;
}
.state-time{
    padding-bottom: 20rpx;
}
.apply-text{
    font-size:24rpx;
    color:#c1c1c1;
    padding:10px;
}
.inputs{
    border:1rpx solid #f3f3f3;
    border-radius:5px;
    font-size:24rpx;
    padding:0 5px;
}
.user-send view{
    padding:5px;
}
</style>